<template >
    <el-card class="box-card">

        <el-input v-model="input" placeholder="请输入搜索内容" />
        <el-button type="default" :icon="Search" class="search" />
        <el-button type="primary" class="add" @click="addGood">添加商品</el-button>
        <AddGood ref="add" @getAddConfirm="getAddConfirm"></AddGood>
        <!-- 编辑弹窗 -->
        <EditGood title="tachOpen" />
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%"
            class="table" empty-text="暂无数据">
            <el-table-column type="index" label="#" width="50" />
            <el-table-column prop="goods_name" label="商品名称" width="200"/>
            <el-table-column prop="goods_price" label="商品价格(元)" width="200" />
            <el-table-column prop="goods_weight" label="商品重量" width="200" />

            <el-table-column prop="add_time " label="创建时间">
                <template #default="scope">
                    {{setTime(scope.row.add_time)}}
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="primary">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination small background layout="total, sizes, prev, pager, next,jumper" :total="tableData.length"
            v-model:currentPage="currentPage" v-model:page-size="pageSize" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
            
    </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getGood } from "@/api/good";
import AddGood from "./component/AddGood.vue"
import EditGood from "./component/EditGood.vue";

const input = ref('')
const add = ref()

const tableData: any = reactive([])

const currentPage:any = ref(1)
const pageSize:any  = ref(10)

const handleSizeChange = (val: number) => {
    pageSize.value = val
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}

const setTime = (date:any) => {
    date = new Date(date);
    // console.log(date);
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    let h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
    let m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
    let s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
    let strDate = Y + M + D + h + m + s;
    // console.log('输出内容:', strDate)
    return strDate
}

const getGoodList = async () => {
    let res = await getGood({
        pagenum: currentPage.value,
        pagesize: pageSize.value,
        query:""
    })

    tableData.push(...res.data.data.goods)
}
getGoodList()

const addGood = ()=>{
    add.value.addDialog()
}

// 确认添加
const getAddConfirm = (good:{
    goods_name : string;
    goods_price:string;
    goods_weight:string;
    add_time:string;
})=>{
    console.log(good)

    const {goods_name,goods_price,goods_weight,add_time} = good

    tableData.push({
        goods_name,
        goods_price,
        goods_weight,
        add_time
    })
}
// 控制 编辑弹窗的显示
const tachOpen = ref(false)
// 点击打开弹窗并且传递数据
const handleEdit = (index: number, row: any) => {
    tachOpen.value = true
    console.log(index, row);
    // 商品名称
    console.log(row.goods_name,
    // 商品价格
    row.goods_price ,
    // 商品重量
    row.goods_weight ,
    // 创建时间
    row.add_time)

};

const handleDelete = (index: number, row: any) => {
    console.log(index, row);
};



</script>

<style scoped lang="scss">
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 100%;
}

.el-input {
    width: 300px;
    height: 40px;
    margin-top: 10px;
}


.search {
    width: 60px;
    height: 40px;
    margin-top: 10px;
    border-left: none;
    border-radius: 0 5px 5px 0;
    background-color: #fafafa;
}

.add {
    width: 90px;
    height: 40px;
    margin-top: 10px;
    font-size: 15px;
}

.table,
.el-pagination {
    margin-top: 20px;
}
</style>